import React from 'react';
import ServiceCard from './ServiceCard';
import { services } from '@/data/services';
import { useRouter } from 'next/router';

const ServiceList: React.FC = () => {
  const router = useRouter();

  const handleServiceClick = (serviceId: string) => {
    router.push(`/service/${serviceId}`);
  };

  return (
    <div className="p-4 space-y-2">
      {services.map((service) => (
        <ServiceCard
          key={service.id}
          {...service}
          onClick={() => handleServiceClick(service.id)}
        />
      ))}
    </div>
  );
};

export default ServiceList;